<template>
  <div>
    <div>
      全选: <input type="checkbox" v-model="isAll" />
      <button @click="fanFn">反选</button>
    </div>
    <div>
      <ul>
        <li v-for="(item, index) in arr" :key="index">
          <input type="checkbox" v-model="item.checked" />{{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { name: "猪八戒", checked: false },
        { name: "孙悟空", checked: false },
        { name: "唐僧", checked: false },
        { name: "白龙马", checked: false },
      ],
    };
  },
  computed: {
    isAll: {
      set(val) {
        this.arr.forEach((item) => (item.checked = val));
      },
      get() {
        return this.arr.every((item) => item.checked);
      },
    },
  },
  methods: {
    fanFn() {
      this.arr.forEach((item) => {
        item.checked = !item.checked;
      });
    },
  },
};
</script>

<style></style>
